<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="search-bar">
			<input type="text" 
				   v-model="searchQuery" 
				   placeholder="搜索游戏..." 
				   @confirm="onSearch"
				   confirm-type="search"
				   auto-focus />
			<button class="search-button" @click="onSearch">🔍</button>
		</view>

		<!-- 搜索结果 -->
		<view class="result-section" v-if="searchResults.length > 0">
			<text class="result-title">找到 {{ searchResults.length }} 个相关游戏</text>
			<view class="result-list">
				<view class="result-item" 
					  v-for="game in searchResults" 
					  :key="game.game_id"
					  @click="navigateToGameDetail(game.game_id)">
					<image :src="game.game_logo" class="game-logo" mode="aspectFill"/>
					<view class="game-info">
						<text class="game-name">{{ game.game_name }}</text>
						<text class="game-desc">{{ truncateText(game.game_description, 30) }}</text>
						<view class="game-tags">
							<text class="tag" v-for="(tag, index) in game.game_tags" :key="index">
								{{ tag }}
							</text>
						</view>
					</view>
					<button class="play-button">开始</button>
				</view>
			</view>
		</view>

		<!-- 无结果显示 -->
		<view class="no-result" v-else>
			<text class="no-result-text">未找到相关游戏</text>
			<text class="no-result-tip">试试其他关键词吧</text>
		</view>
	</view>
</template>

<script>
import { games } from '../../utils/gameData.js';

export default {
	data() {
		return {
			searchQuery: games[0].game_name,
			searchResults: []
		}
	},
	onLoad(options) {
		if (options.query) {
			this.searchQuery = decodeURIComponent(options.query);
		}
		this.onSearch();
	},
	methods: {
		onSearch() {
			if (!this.searchQuery.trim()) {
				this.searchQuery = games[0].game_name;
			}
			
			// 搜索逻辑
			this.searchResults = games.filter(game => {
				const query = this.searchQuery.toLowerCase();
				return game.game_name.toLowerCase().includes(query) ||
					   game.game_description.toLowerCase().includes(query) ||
					   game.game_tags.some(tag => tag.toLowerCase().includes(query));
			});
		},
		navigateToGameDetail(gameId) {
			uni.navigateTo({
				url: `/pages/lobby/gameDetail?id=${gameId}`
			});
		},
		truncateText(text, length = 30) {
			if (text && text.length > length) {
				return text.substring(0, length) + '...';
			}
			return text;
		}
	}
}
</script>

<style scoped>
.container {
	padding: 20px;
	background: #1E1E2E;
	min-height: 100vh;
}

.search-bar {
	background: rgba(45, 45, 68, 0.6);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(110, 108, 137, 0.3);
	border-radius: 16px;
	margin-bottom: 20px;
	padding: 6px 8px 6px 16px;
	display: flex;
	align-items: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.result-title {
	color: #9796B8;
	font-size: 14px;
	margin-bottom: 15px;
	padding-left: 10px;
}

.result-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.result-item {
	background: #2D2D44;
	border: 1px solid #4D4C6D;
	border-radius: 16px;
	padding: 15px;
	display: flex;
	align-items: center;
	gap: 15px;
	transition: transform 0.15s ease;
}

.result-item:active {
	transform: scale(0.98);
	background: #4D4C6D;
}

.game-logo {
	width: 60px;
	height: 60px;
	border-radius: 12px;
	border: 1px solid #4D4C6D;
}

.game-info {
	flex: 1;
}

.game-name {
	color: #9796B8;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 4px;
}

.game-desc {
	color: #6E6C89;
	font-size: 12px;
	margin-bottom: 8px;
}

.game-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.tag {
	background: #4D4C6D;
	color: #9796B8;
	font-size: 10px;
	padding: 2px 8px;
	border-radius: 8px;
}

.play-button {
	background: #4D4C6D !important;
	color: #9796B8 !important;
	border: none !important;
	border-radius: 12px !important;
	padding: 6px 12px !important;
	font-size: 14px;
	transition: transform 0.15s ease;
}

.play-button:active {
	transform: scale(0.95);
}

.no-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 0;
}

.no-result-text {
	color: #9796B8;
	font-size: 16px;
	margin-bottom: 8px;
}

.no-result-tip {
	color: #6E6C89;
	font-size: 14px;
}
</style> 